<template>
  <div>
    <h2>学生增加</h2>
    <div class="form">
      <div class="form-item">
        <label class="form-item__label" for="name">学生姓名</label>
        <div class="form-item__content">
          <input
            class="input"
            type="text"
            maxlength="10"
            id="name"
            v-model="formData.name"
          />
        </div>
      </div>
      <div class="form-item">
        <label class="form-item__label">性别</label>
        <div class="form-item__content">
          男<input
            class="input"
            type="radio"
            name="sex"
            value="男"
            v-model="formData.sex"
          />
          女<input
            class="input"
            type="radio"
            name="sex"
            value="女"
            v-model="formData.sex"
          />
        </div>
      </div>
      <div class="form-item">
        <label class="form-item__label" for="tel">电话号码</label>
        <div class="form-item__content">
          <input
            class="input"
            type="text"
            maxlength="11"
            id="tel"
            v-model="formData.tel"
          />
        </div>
      </div>
      <div class="form-item">
        <label class="form-item__label">专业</label>
        <div class="form-item__content">
          <select v-model="formData.major">
            <option value=""></option>
            <option value="JAVA">JAVA</option>
            <option value="WEB">WEB</option>
          </select>
        </div>
      </div>
      <div class="form-item">
        <button
          id="submit"
          class="button button--primary"
          style="margin-left: 120px"
          @click="handleSubmit"
        >
          确认
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
    import {reactive,defineEmits} from "vue";

    const emits = defineEmits(["update:modelValue"]);

    const formData = reactive({});

    let id = 100;

    function handleSubmit() {
        emits("update:modelValue",{...formData,id: id ++})
    }
</script>

<style>
</style>